<template>
  <div class="app-container">
    <div class="filter-container">
      <el-steps space="60%" process-status="finish" :active="currentStep" finish-status="success" style="margin-top: 20px;margin-left:20%">
        <el-step title="图书检索" process-status="process" icon="el-icon-search" />
        <el-step title="图书选择" icon="el-icon-thumb" />
        <el-step title="图书详情" icon="el-icon-notebook-2" />
        <el-step title="图书借阅" icon="el-icon-s-promotion" />
      </el-steps>
    </div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark" /></el-col>
    </el-row>
    <div v-if="bookLend" class="filter-container">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="margin-left:3%">小伙伴您好！请在这里输入筛选条件后进行书目检索：</span>
          </div>
          <div style="margin-bottom:50px;">
            <el-col :span="4" class="text-center">
              <i class="el-icon-paperclip" />
              <el-select v-model="queryParams.classId" placeholder="请选择图书类别">
                <el-option
                  v-for="item in classList"
                  :key="item.classId"
                  :label="item.className"
                  :value="item.classId"
                />
              </el-select>
            </el-col>
            <el-col :span="4" class="text-center">
              <i class="el-icon-edit" />
              <el-input v-model="queryParams.name" :placeholder="'请输入图书名称'" class="filter-item search-item" />
            </el-col>
            <el-col :span="4" class="text-center">
              <i class="el-icon-edit" />
              <el-input v-model="queryParams.author" :placeholder="'请输入作者名称'" class="filter-item search-item" />
            </el-col>
            <el-col :span="4" class="text-center">
              <i class="el-icon-paperclip" />
              <el-select v-model="queryParams.language" placeholder="请选择语言" class="filter-item search-item">
                <el-option
                  v-for="item in language"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="4" class="text-center">
              <i class="el-icon-edit" />
              <el-input v-model="queryParams.publish" :placeholder="'请输入出版社名称'" class="filter-item search-item" />
            </el-col>
            <el-col :span="4" class="text-center">
              <el-button class="filter-item" type="primary" icon="el-icon-search" plain @click="search">
                {{ $t('table.search') }}
              </el-button>
              <el-button class="filter-item" type="primary" icon="el-icon-search" plain @click="initdata">
                {{ $t('table.reset') }}
              </el-button>
            </el-col>
          </div>
        </el-card>
      </el-row>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="图书编码" min-width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.bookId }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图书名称" min-width="180px">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图书作者" min-width="180px">
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="出版社" min-width="180px">
          <template slot-scope="scope">
            <span>{{ scope.row.publish }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="语言" min-width="40px">
          <template slot-scope="scope">
            <span>{{ scope.row.language }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发表时间" min-width="180px">
          <template slot-scope="scope">
            <span>{{ scope.row.pubdate }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="归属类别" min-width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.lclassInfo.className }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="借阅状态" min-width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.state }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图书价格" min-width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="Actions" min-width="180px">
          <template slot-scope="scope">
            <el-button type="text" @click="getMsg(scope.row)">图书详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <el-dialog
      title="图书详情"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="form" :model="bookInfo" label-width="80px">
        <el-form-item label="图书名称">
          <el-tag>{{ bookInfo.name }}</el-tag>
        </el-form-item>
        <el-form-item label="图书作者">
          <el-tag>{{ bookInfo.author }}</el-tag>
        </el-form-item>
        <el-form-item label="出版社">
          <el-tag>{{ bookInfo.publish }}</el-tag>
        </el-form-item>
        <el-form-item label="语言">
          <el-tag>{{ bookInfo.language }}</el-tag>
        </el-form-item>
        <el-form-item label="发表时间">
          <el-tag>{{ bookInfo.pubdate }}</el-tag>
        </el-form-item>
        <el-form-item label="归属类别">
          <el-tag>{{ bookInfo.lclassInfo.className }}</el-tag>
        </el-form-item>
        <el-form-item label="借阅状态">
          <el-tag>{{ bookInfo.state }}</el-tag>
        </el-form-item>
        <el-form-item label="图书价格">
          <el-tag>{{ bookInfo.price }}</el-tag>
        </el-form-item>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>图书摘要</span>
          </div>
          {{ bookInfo.introduction }}
        </el-card>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="lendAction">借阅</el-button>
      </span>
    </el-dialog>
    <div v-if="lendFlag">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>小伙伴您好:欢迎来到图书借阅界面：</span>
          </div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>借阅须知：</span></br>
            </div>
            <span style="margin-left:2%">借阅须知1：</span></br>
            <span style="margin-left:2%">借阅须知2：</span></br>
            <span style="margin-left:2%">借阅须知3：</span></br>
            <span style="margin-left:2%">借阅须知4：</span></br>
            <span style="margin-left:2%">借阅须知5：</span></br>
            <span style="margin-left:2%">借阅须知6：</span></br>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>图书信息：</span></br>
            </div>
            <el-form ref="form" :model="bookInfo" label-width="80px">
              <div style="margin-bottom:8px;">
                <el-col :span="4" class="text-left">
                  <el-form-item label="图书名称">
                    <el-tag>{{ bookInfo.name }}</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="text-left">
                  <el-form-item label="图书作者">
                    <el-tag>{{ bookInfo.author }}</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="text-left">
                  <el-form-item label="出版社">
                    <el-tag>{{ bookInfo.publish }}</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="text-left">
                  <el-form-item label="归属类别">
                    <el-tag>{{ bookInfo.lclassInfo.className }}</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="text-left">
                  <el-form-item label="图书价格">
                    <el-tag>{{ bookInfo.price }}</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="18" class="text-left">
                  <el-form-item label="图书摘要">
                    <span> {{ bookInfo.introduction }}</span>
                  </el-form-item>
                </el-col>
              </div>
            </el-form>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>读者证：</span></br>
            </div>
            <el-form ref="form" :model="bookInfo" label-width="80px">
              <div style="margin-bottom:8px;">
                <el-col :span="24" class="text-left">
                  <el-form-item label="读者证号">
                    <el-input v-model="bookInfo.cardId" />
                  </el-form-item>
                </el-col>
              </div>
            </el-form>
          </el-card>
        </el-card>
      </el-row>
      <el-row>
        <el-col :span="24" class="text-center">
          <el-button type="primary" @click=" back">返回上一步</el-button>
          <el-button type="primary" @click=" subscribe">预约</el-button>
          <el-button type="primary" @click="submit">借阅</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-if="successFlag">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>借阅详情：</span>
          </div>
          <div style="margin-bottom:50px;">
            <el-table v-loading="listLoading" :data="lendList" border fit highlight-current-row style="width: 100%">
              <el-table-column align="center" label="读者证号" min-width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.cardId }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="借阅流水号" min-width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.lendId }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="图书编码" min-width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.bookId }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="图书名称" min-width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.bookName }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="图书类别" min-width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.className }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="借阅日期" min-width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.lendDate }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="归还日期" min-width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.backDate }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-col style="margin-top:1%" :span="24" class="text-center">
              <el-button type="primary" @click="refresh">继续借阅</el-button>
              <el-button type="primary" @click="refresh">关闭页面</el-button>
            </el-col>
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import Mallki from '@/components/TextHoverEffect/Mallki';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination

export default {
  components: { Mallki, Pagination },
  filters: {},
  data() {
    return {
      card: false,
      successFlag: false,
      bookLend: true,
      lendFlag: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      currentStep: 0,
      classList: [],
      language: [
        {
          value: '中文',
          label: '中文'
        },
        {
          value: '英文',
          label: '英文'
        },
        {
          value: '德语',
          label: '德语'
        },
        {
          value: '法语',
          label: '法语'
        }
      ],
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      list: [],
      total: 0,
      listLoading: false,
      dialogVisible: false,
      bookInfo: {
        card: '',
        name: '',
        author: '',
        publish: '',
        language: '',
        pubdate: '',
        lclassInfo: { className: '' },
        state: '',
        price: '',
        introduction: ''
      },
      lendList: []
    };
  },
  computed: {},
  created() {
    this.$get('study/lClassInfo').then(res => {
      this.classList = res.data.resultBody;
    });
  },
  methods: {
    initdata() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        classId: '',
        author: '',
        language: null,
        publish: null
      };
    },
    refresh() {
      this.$store
        .dispatch('tagsView/delCachedView', '/library/lend')
        .then(() => {
          var fullPath = '/library/lend';
          this.$nextTick(() => {
            this.$router.replace({
              path: '/redirect' + fullPath
            });
          });
        });
    },
    back() {
      this.lendFlag = false;
      this.bookLend = true;
      this.currentStep = 1;
    },
    subscribe() {
      this.lendFlag = false;
      this.successFlag = true;
      this.currentStep = 4;
    },
    submit() {
      this.$post('study/lLendList', { ...this.bookInfo }).then(res => {
        if (res.data.code === '000000') {
          console.log(res);
          this.$message.success('借阅成功');
          console.log(this.bookInfo);
          this.lendFlag = false;
          this.successFlag = true;
          this.currentStep = 4;
          var lendId = { lendId: res.data.resultBody };
          this.$get('study/lLendList/getLendMsg', { ...lendId }).then(res => {
            this.lendList.push(res.data.resultBody);
          });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    getMsg(bookInfo) {
      console.log(bookInfo);
      this.dialogVisible = true;
      this.currentStep = 2;
      this.bookInfo = bookInfo;
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.currentStep = 1;
    },
    lendAction() {
      this.$;
      this.dialogVisible = false;
      this.bookLend = false;
      this.lendFlag = true;
      this.currentStep = 3;
    },
    getList() {
      this.listLoading = true;
      this.$get('study/lBookInfo/list', {
        ...this.queryParams
      }).then(response => {
        this.list = response.data.resultBody.rows;
        this.total = response.data.resultBody.total;
        this.listLoading = false;
      });
    },
    search() {
      this.getList();
      this.currentStep = 1;
    }
  }
};
</script>
<style lang='scss' scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
